<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root" >
   <div >
<!--   1.class样式
       写法 ： class="xxx" xxx可以是字符串、对象、数组 -->
       <div class="bc">class原生写法</div>
<!--       字符串写法适用于类名不确定，要动态获取时使用。-->
       <div :class="mood">字符串写法</div>
<!--       对象写法适用于: 样绑定多个样式，个数不确定，名字也不确定-->
       <div :class="classObj">对象写法</div>
<!--       数组写法适用于绑定样式个数确定，名字也确定。-->
       <div :class="[mood,mood2]">数组写法</div>


<!--       2. style样式 标签内绑定样式-->
<!--       :style = "{frontSize: xxx}" 期中xxx是动态值-->
       <div style="font-size: 40px">style原生写法</div>

   </div>
   </div>
</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    new Vue({
        el: '#root',
        data:{
          mood:"bc",
          mood2:"fz",
          classObj:{
              bc:false,
              bc2:true,
              fz:true,
          },

          fontSize:'40px',

          styleObj:{
                color:'blue',
                fontSize:'40px',
                backgroundColor:'red'
            }
        },
        computed:{

        },
        methods:{

        }
    })
</script>
<style type="text/css">
    .bc{
        background-color: red;
    }
    .bc2{
        background-color: blue;
    }
    .fz{
        font-size: 40px;
    }
</style>
</html>
